<template>
  <view>
    <view class="bg-white p-12">
      <u-search
        v-model="keyword"
        :show-action="false"
        placeholder="请输入收货人姓名,电话,地址"
      ></u-search>
    </view>
    <scroll-view scroll-y style="height: calc(100vh - 88px - 48rpx)">
      <u-radio-group :value="defaultAddressId" @change="setDefaultAddress">
        <view class="p-12 flex-col gap-12 w-full">
          <view class="shadow-card" v-for="item in addressList">
            <view class="flex items-center justify-between">
              <view>
                <view class="text-bold text-14"
                  >{{ item.consigneeName }}
                  <text>{{ item.consigneePhone }}</text></view
                >
                <view class="text-12 color-gray mt-12">{{
                  item.provinceName +
                  " " +
                  item.cityName +
                  " " +
                  item.areaName +
                  " " +
                  item.detailAddress
                }}</view>
              </view>
            </view>
            <view class="u-border-top pt-12 mt-12 flex justify-between">
              <u-radio
                active-color="#86bf9e"
                :name="item.serialNo"
                :label="
                  defaultAddressId === item.serialNo
                    ? '默认地址'
                    : '设为默认地址'
                "
                :value="item.serialNo"
                label-size="12"
              ></u-radio>
              <view class="flex gap-8 color-tip text-12">
                <view @click="deleteAddress(item.serialNo)">删除</view>
                <view @click="editAddress">编辑</view>
              </view>
            </view>
          </view>
        </view>
      </u-radio-group>
    </scroll-view>
    <view class="footer bg-white px-12">
      <u-button
        type="primary"
        text="新增地址"
        @click="goAddAddress"
        shape="circle"
      ></u-button>
    </view>
  </view>
</template>

<script>
import {
  fetchDeliveryAddressDelete,
  fetchDeliveryAddressList,
  fetchSetDeliveryAddressDefault,
} from "@/services/api";

export default {
  data() {
    return {
      addressList: [
        { address: "地址", name: "用户名称", phone: 13361784696, id: 111 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
        { id: 222, address: "地址", name: "用户名称", phone: 13361784696 },
      ],
      keyword: "",
      defaultAddressId: "",
    };
  },
  methods: {
    deleteAddress(serialNo) {
      uni.showModal({
        content: "确定删除该地址？",
        success: async (res) => {
          if (res.confirm) {
            const { error } = await fetchDeliveryAddressDelete({ serialNo });
            if (!error) {
              uni.$u.toast("删除成功");
              this.getAddressList();
            }
          }
        },
      });
    },
    editAddress() {
      this.$Router.push({
        name: "addShippingAddress",
      });
    },
    goAddAddress() {
      this.$Router.push({
        name: "addShippingAddress",
      });
    },
    async setDefaultAddress(serialNo) {
      console.log(serialNo);
      const { error } = await fetchSetDeliveryAddressDefault({ serialNo });
      if (!error) {
        uni.$u.toast("设置成功");
        this.defaultAddressId = serialNo;
      }
    },
    async getAddressList() {
      const { data, error } = await fetchDeliveryAddressList();
      if (!error) {
        this.addressList = data;
        this.defaultAddressId = data.find(
          (item) => item.defaultAddress,
        )?.serialNo;
      }
    },
  },
  async onShow() {
    await this.getAddressList();
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.shadow-card {
  padding: 24rpx;
  border-radius: 12rpx;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}
</style>
